import 'package:flutter/material.dart';
import 'tabs/home.dart';
import 'tabs/category.dart';
import 'tabs/my.dart';


class Tabs extends StatefulWidget {
  final int index;
  Tabs({this.index = 0});
  @override
  _TabsState createState() => _TabsState(this.index);
}

class _TabsState extends State<Tabs> {
  List pages = [HomePage(), CategoryPage(), MyPage()];
  int currentIndex = 0;
  _TabsState(this.currentIndex);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Flutter')),
      body: this.pages[this.currentIndex],
      drawer: Drawer(
        child: Column(
          children: <Widget>[
            Row(
              children: <Widget>[
                Expanded(
                  // 自带的头部空间
                  child: UserAccountsDrawerHeader(
                    decoration: BoxDecoration(
                      image: DecorationImage(
                        image: NetworkImage('https://www.itying.com/images/flutter/1.png'),
                        fit: BoxFit.cover
                      )
                    ),
                    accountName: Text('阿健'),
                    accountEmail: Text('983097239@qq.com'),
                    currentAccountPicture: CircleAvatar(
                      backgroundImage: AssetImage('images/avatar.jpg'),
                    ),
                    otherAccountsPictures: <Widget>[
                      CircleAvatar(
                        backgroundImage: NetworkImage('https://www.itying.com/images/flutter/3.png'),
                      ),
                      CircleAvatar(
                        backgroundImage: NetworkImage('https://www.itying.com/images/flutter/4.png'),
                      )
                    ],
                  ),

                  // 自定义头部
                  /*child: DrawerHeader(
                    child: Text('你好Flutter',style: TextStyle(color: Colors.white,fontSize: 30),),
                    decoration: BoxDecoration(
                        color: Colors.green,
                      image: DecorationImage(
                        image: NetworkImage('https://www.itying.com/images/flutter/1.png',),
                        fit: BoxFit.cover
                      )
                    ),
                  ),*/
                )
              ],
            ),
            ListTile(
              title: Text('我的空间'),
              leading: CircleAvatar(
                child: Icon(Icons.home),
              ),
            ),
            Divider(),
            ListTile(
              title: Text('用户中心'),
              leading: CircleAvatar(
                child: Icon(Icons.person),
              ),
              trailing: Icon(Icons.arrow_forward_ios),
              onTap: (){
                Navigator.of(context).pop(); // 隐藏侧边栏Drawer
                Navigator.pushNamed(context, '/userCenter');
              },
            ),
            Divider(),
            ListTile(
              title: Text('设置'),
              leading: CircleAvatar(
                child: Icon(Icons.settings),
              ),
            )
          ],
        ),
      ),
      endDrawer: Drawer(
        child: Text('右侧侧边栏'),
      ),
      floatingActionButton: Container(
        width: 60,
        height: 60,
        padding: EdgeInsets.all(3),
        decoration: BoxDecoration(
          color: Colors.white,
          boxShadow: [
            BoxShadow(
              color: Color.fromRGBO(0, 0, 0, 0.1),
              blurRadius: 5.0,
            )
          ],
          borderRadius: BorderRadius.circular(30),
        ),
        child: FloatingActionButton(
          child: Icon(Icons.add),
          backgroundColor: this.currentIndex==1?Colors.pink:Colors.green,
          onPressed: () {
            setState(() {
              this.currentIndex = 1;
            });
          },
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: this.currentIndex, // 激活的Index
//        iconSize: 25, // 图标大小
//        fixedColor: Colors.deepPurple, // 选中的颜色
        type: BottomNavigationBarType.fixed, // 配置底部tabs显示模式，不然大于三个就会出现记下来
        onTap: (int index){
          setState(() {
            this.currentIndex = index;
          });
        },
        items: [
          BottomNavigationBarItem(
              title: Text('首页'),
              icon: Icon(Icons.home)
          ),
          BottomNavigationBarItem(
              title: Text('分类'),
              icon: Icon(Icons.category)
          ),
          BottomNavigationBarItem(
              title: Text('我的'),
              icon: Icon(Icons.person)
          )
        ],
      ),
    );
  }
}